
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/css-head :: css-head">
</head>
<style>
    body{
        min-width: 900px;
        overflow: auto;
    }

    textarea{
        width:100%;
        height:100px;
    }
</style>
<body>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 系统管理</a></li>
        <li class="active">列表管理</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">列表页</h3>
            <br><br>
            <div class="search">
                <div class="input-group" style="float: right;width: 300px;">
                    <input type="text" class="form-control" id="keyword" th:value="${keyword }" placeholder="请输入关键字">
                    <span class="input-group-addon searcher" style="cursor:pointer;"><i class="fa fa-search"></i> 搜素</span>
                </div>
            </div>
            <button th:onclick="add();" th:if="${QX.add == '1' && QX.query == '1' }" class="btn btn-success btn-sm" ><i class="fa fa-plus"></i> &nbsp;&nbsp;新增</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table id="roleList" class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                            <th>id</th>
                          <th>姓名</th>
                          <th>年龄</th>
                          <th>性别：1--男，0 -- 女</th>
                          <th>是否删除，Y/N</th>
                            <th>createBy</th>
                          <th>创建时间</th>
                            <th>modifyBy</th>
                          <th>鏇存柊鏃堕棿</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:if="${QX.query == '1' }" th:each="item,stat :${list.data.records }" >
                    <td th:text="${stat.count}">1</td>
                          <td th:text="${item.id }"></td>
                          <td th:text="${item.name }">姓名</td>
                          <td th:text="${item.age }">年龄</td>
                          <td th:text="${item.sex }">性别：1--男，0 -- 女</td>
                          <td th:text="${item.isDeleted }">是否删除，Y/N</td>
                          <td th:text="${item.createBy }"></td>
                        <td><div th:text="${#temporals.format(item.createTime, 'yyyy-MM-dd HH:mm:ss') }" >创建时间</div></td>
                          <td th:text="${item.modifyBy }"></td>
                        <td><div th:text="${#temporals.format(item.modifyTime, 'yyyy-MM-dd HH:mm:ss') }" >鏇存柊鏃堕棿</div></td>
                    <td>
                        <span th:unless="${QX.add == '1' || QX.del == '1' || QX.edit == '1' || QX.query == '1' }" ><i class="fa fa-lock"></i> 无权限</span>
                        <span data-toggle="tooltip" data-placement="left" title="修改" th:if="${QX.edit == '1' }"  th:data-id="${item.id }" class="btn btn-xs btn-info" th:onclick="edit(this.getAttribute('data-id'));"><i class="fa fa-edit"></i></span>
                        <span data-toggle="tooltip" data-placement="right" title="删除" th:if="${QX.del == '1' }" class="btn btn-xs btn-danger"  th:data-id="${item.id }" th:onclick="del(this.getAttribute('data-id'));"><i class="fa fa-trash-o"></i></span>
                    </td>
                </tr>
                <tr th:unless="${QX.query == '1' }" >
                    <td colspan="11" rowspan="1" align="center">
                        <h2>您无权限查看该页面</h2>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
    <div style="max-width:800px;margin:0 auto;">
        <div id="kkpager"></div>
    </div>
</section>

<div class="modal fade" id="itemModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="itemModelHead">添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                         <input type="hidden" name="id" id="id" value="0"/>
                    <input type="hidden" name="actionurl" id="actionurl" value="/"/>
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label"> 姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="name" value="" id="name" placeholder="请输入姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="age" class="col-sm-2 control-label"> 年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="age" value="" id="age" placeholder="请输入年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sex" class="col-sm-2 control-label"> 性别：1--男，0 -- 女</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="sex" value="" id="sex" placeholder="请输入性别：1--男，0 -- 女">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="createBy" class="col-sm-2 control-label"> createBy</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="createBy" value="" id="createBy" placeholder="请输入createBy">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="createTime" class="col-sm-2 control-label"> 创建时间</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="createTime" value="" id="createTime" placeholder="请输入创建时间">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="modifyBy" class="col-sm-2 control-label"> modifyBy</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="modifyBy" value="" id="modifyBy" placeholder="请输入modifyBy">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="modifyTime" class="col-sm-2 control-label"> 鏇存柊鏃堕棿</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="modifyTime" value="" id="modifyTime" placeholder="请输入鏇存柊鏃堕棿">
                                </div>
                            </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" id="submitBtn" >添加</button>
            </div>
        </div>
    </div>
</div>


<script th:src="@{/static/bower_components/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/static/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/static/dist/js/adminlte.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/page/src/kkpager.js}"></script>
<script th:inline="javascript">
    //init
    $(function(){
        var pageNo = getParameter('pageNo');
        if(!pageNo){
            pageNo = 1;
        }
        //生成分页
        kkpager.generPageHtml({
            pno : [[${list.data.current }]],
            //总页码
            total : [[${list.data.pages }]],
            //总数据条数
            totalRecords : [[${list.data.total }]],
            mode : 'click',//默认值是link，可选link或者click
            click : function(n){
                //手动选中按钮
                this.selectPage(n);
                skipPage(n);
                return false;
            }
        });

        //提交按钮
        $("#submitBtn").click(function(){
            var url = $("input[name='actionurl']").val();
            var id = $("#id").val();
            var name = $("#name").val();
            var age = $("#age").val();
            var sex = $("#sex").val();
            var isDeleted = $("#isDeleted").val();
            var createBy = $("#createBy").val();
            var createTime = $("#createTime").val();
            var modifyBy = $("#modifyBy").val();
            var modifyTime = $("#modifyTime").val();
            if(checkData(name,age,sex,isDeleted,createBy,createTime,modifyBy,modifyTime)){
                $.ajax({
                    type:"POST",
                    url:_ctx+url,
                    cache:false,
                    data:{id:id,name:name,age:age,sex:sex,isDeleted:isDeleted,createBy:createBy,createTime:createTime,modifyBy:modifyBy,modifyTime:modifyTime, time:new Date().getTime()},
                    dataType:"json",
                     success:function(data){
                    if(data.status == "200"){
                        window.location.href=window.location.href;
                    }else{
                        alert(data.message);
                    }
                }
            });
                $("#itemModal").modal("hide");
            }

        });
    });
    var listUrl = "/test/people/list";
    var editUrl = "/test/people/edit";
    var addUrl = "/test/people/add";
    var delUrl = "/test/people/del";
    var queryUrl = "/test/people/query";

    //跳转页面
    function  skipPage(pageNo) {
        var keyword = $("#keyword").val();
        window.location.href=_ctx+listUrl+"?keyword="+keyword+"&pageNo="+pageNo;
    }

    /**
     * 新增
     * */
    function add(){
        $("input[name='actionurl']").val(addUrl);
        $("#modelHead").text("新增");
        $("#submitBtn").text("新增");
        setData("","","","","","","","","");
        $("#itemModal").modal("show");
    }
    /**
     * 编辑
     *
     * */
    function edit(id){
        $("#modelHead").text("编辑");
        $("#submitBtn").text("编辑");
        $("input[name='actionurl']").val(editUrl);
        $.get(_ctx+queryUrl,{t:new Date().getTime(),id:id},function(data){
            console.log("data:",data);
            if(data.status == "200"){
                var item = data.data;
                console.log("item:",item);
                setData( item.id , item.name , item.age , item.sex , item.isDeleted , item.createBy , item.createTime , item.modifyBy , item.modifyTime )
            }else{
                alert(data.message);
            }
        })
        $("#itemModal").modal("show");
    }

    /**
     * 删除
     * */
    function del(id){
        if(confirm("您确定要删除这条记录吗？"))
        $.post(_ctx+delUrl,{t:new Date().getTime(),id:id},function(data){
            if(data.status == "200"){
                window.location.href=window.location.href;
            }else{
                alert(data.message);
            }
        });
    }

    /**
     * 校验参数
     * @returns {boolean}
     */
    function checkData(name,age,sex,isDeleted,createBy,createTime,modifyBy,modifyTime){
            if(name == ""){
                alert("姓名不能为空");
                $("input[name='name']").focus();
                return false;
             }
            if(age == ""){
                alert("年龄不能为空");
                $("input[name='age']").focus();
                return false;
             }
            if(sex == ""){
                alert("性别：1--男，0 -- 女不能为空");
                $("input[name='sex']").focus();
                return false;
             }
            if(createBy == ""){
                alert("createBy不能为空");
                $("input[name='createBy']").focus();
                return false;
             }
            if(modifyBy == ""){
                alert("modifyBy不能为空");
                $("input[name='modifyBy']").focus();
                return false;
             }

        return true;
    }

    /**
     *  赋值
      */
    function setData(  id , name , age , sex , isDeleted , createBy , createTime , modifyBy , modifyTime ){
         $("#id").val(id);
         $("#name").val(name);
         $("#age").val(age);
         $("#sex").val(sex);
         $("#isDeleted").val(isDeleted);
         $("#createBy").val(createBy);
         $("#createTime").val(createTime);
         $("#modifyBy").val(modifyBy);
         $("#modifyTime").val(modifyTime);
    }
</script>
</body>
</html>
